<template>
  <div class="container">
    <van-nav-bar
      title="搜索结果"
      left-arrow
      @click-left="goBack"
    />
    <section>
      <news-item
        v-for="news in resultList"
        :key="news.art_id"
        :title="news.title"
        :author="news.aut_name"
        :commentCount="news.comm_count"
        :timestamp="news.pubdate"
        :images="news.cover.images"
      />
    </section>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState('search', ['resultList']),
  },
  methods: {
    ...mapActions('search', ['updateResultList']),
    goBack () {
      this.$router.go(-1);
    },
  },
  created () {
    this.updateResultList(this.$route.query.searchValue || '');
  },
}
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  section {
    flex: 1;
    overflow-y: auto;
  }
}
</style>